<template>
  <u-mask
    class="mask flex-center"
    :zoom="false"
    :show="props.isShow"
    :custom-style="{ height: tools.clientTopHight(), bottom: 0, top: 'auto', display: 'flex', justifyContent: 'center', alignItems: 'center' }"
    @click="emit('close', false)"
  >
    <view class="content flex-direction-column" @click.stop>
      <view class="header">
        参赛须知
        <image src="/pagesA/static/image/39.png" @click="emit('close', false)"></image>
      </view>
      <scroll-view class="scroll" scroll-y>
        <u-parse :html="props.html"></u-parse>
      </scroll-view>
      <view class="bottom flex-center" v-if="props.isBtn">
        <text @click="emit('agree', true)">我已阅读并同意此声明</text>
        <!-- <text @click="emit('close', false)">不同意</text> -->
      </view>
    </view>
  </u-mask>
</template>

<script setup lang="ts">
import tools from '@/utils/tools'
const emit = defineEmits(['close', 'agree'])
const props = defineProps({
  isShow: {
    type: Boolean,
    default() {
      return false
    }
  },
  html: {
    type: String,
    default() {
      return ''
    }
  },
  isBtn: {
    type: Boolean,
    default() {
      return false
    }
  }
})

console.log(props.html)
</script>

<style lang="scss" scoped>
.content {
  width: 664rpx;
  overflow: hidden;
  position: relative;
  min-height: 305rpx;
  max-height: 1026rpx;
  border-radius: 10rpx;
  background-color: #fff;
  .header {
    width: 100%;
    height: 60rpx;
    font-size: 40rpx;
    // color: #e6425e;
    margin-top: 30rpx;
    text-align: center;
    line-height: 60rpx;
    position: relative;
    image {
      top: 0;
      right: 24rpx;
      width: 52rpx;
      height: 52rpx;
      position: absolute;
    }
  }
  .scroll {
    width: 532rpx;
    min-height: 70rpx;
    max-height: 786rpx;
    white-space: normal;
    margin: 22rpx auto 130rpx auto;
  }
  .bottom {
    left: 0;
    right: 0;
    bottom: 0;
    height: 60px;
    position: absolute;
    background: #fff;
    box-shadow: 0px -2px 6px rgba(0, 0, 0, 0.1);
    border-radius: 0px 0px 10rpx 10rpx;
    text {
      color: #fff;
      font-size: 28rpx;
      border-radius: 6rpx;
      padding: 16rpx 22rpx;
      background-color: #e6425e;
      &:nth-child(1) {
        margin-right: 30rpx;
      }
    }
  }
}
</style>
